<template>
    <div>
    <van-index-bar :index-list="computedList" @select="handleChange">
        <div v-for="data in cityList" :key="data.type">
        <van-index-anchor :index="data.type" />          
        <van-cell :title="item.name" v-for="item in data.list" :key="item.cityid" @click="handleClick(item)"/>
        </div>
    </van-index-bar>

    </div>
</template>
<script>
import http from '@/util/https'
import { Toast } from 'vant'
export default {
    data(){
        return {
            cityList:[]
        }
    },
    computed:{
        computedList(){
            return this.cityList.map(item =>item.type)
        }
    },
    destroyed () {
        this.$store.commit('show')
    },
    mounted() {
        this.$store.commit('hide')
        http({
            url:'/gateway?k=6319734',
            headers:{
                'X-Host': 'mall.film-ticket.city.list'
            }
        }).then((res)=> {
            // console.log(res.data.data.cities)
            this.cityList = this.renderCity(res.data.data.cities)
        })
        
        //1.316条 ==》a,b 进行分组
        //利用转换后的数组结合组件库渲染页面
    },
    methods:{
        handleChange(data){
            // console.log("change",data);
            Toast(data)
        },
        renderCity(list){
            console.log(list)
            var letterList = []
            var cityList = []
                for(var i= 65;i<91;i++){
                    // console.log(String.fromCharCode(i));
                    letterList.push(String.fromCharCode(i))
                }
                // console.log(letterList);
                letterList.forEach(letter =>{
                var newList = list.filter(item=>item.pinyin.substring(0,1).toUpperCase() === letter)
                // console.log(newList);
                newList.length > 0 && cityList.push({
                    type:letter,
                    list:newList
                    })
                })
                console.log(cityList);
                // var newList = list.filter(item=>item.pinyin.substring(0,1).toUpperCase() === 'A')
                return cityList
                
        },
        handleClick(item){
            console.log(item.name,item.cityId)
            // this.$store.state.cityName = item.name
            this.$store.commit('changeCityName',item.name)
            this.$store.commit('changeCityId',item.cityId)
            this.$store.commit('clearCinema')
            this.$router.back()
        }
    }

}
</script>
<style lang="scss" >
.van-toast--html, .van-toast--text{
    min-width: 30px;
}
</style>